<template>
	<view :class="config.style">
		<FullscreenLoading :loading="loading" :config="config"></FullscreenLoading>
		<!-- #ifdef H5-->
		<Top :config="config"></Top>
		<!-- #endif -->
		<view v-if="data.status == 1">
			<view class="main-section top tabbar-bottom">
				<view class="cover">
					<image :src="data.cover_800" mode="widthFix"></image>
				</view>
			
				<view class="base-info">
					<view class="title">
						{{data.title}}
					</view>
					<view class="description">
						{{data.description}}
					</view>
					<view class="price" v-if="data.price==0">
						免费
					</view>
					<view class="price" :class="!showSale?'hidden':''" v-else>
						￥ {{data.price}}
					</view>
					<view class="data-info">
						<view class="marking-price" :class="!showSale?'hidden':''" v-if="config.show_marking_price==1&&data.marking_price!=0">
							￥ {{data.marking_price}}
						</view>
						<view class="exp-info">
							<view class="item view">
								<uni-icons type="eye" size="10" color="#999"></uni-icons> 
								<text class="num">{{data.handling_view}}</text>
							</view>
							<view class="item sales">
								<uni-icons type="cart-filled" size="10" color="#999"></uni-icons> 
								<text class="num">{{data.handling_sales}}</text>
							</view>
							<view class="item favorites">
								<uni-icons type="star" size="10" color="#999"></uni-icons> 
								<text class="num">{{data.handling_favorites}}</text>
							</view>
						</view>
					</view>
					<view class="tabs">
						<view v-if="data.only_member == 1" class="item only-member">会员专享</view>
						<view v-if="data.score > 0" class="item score">
							<text>返还积分：</text>
							<text>{{data.score}}</text>
						</view>
					</view>
				</view>
				
				<!--支持的会员卡-->
				<template v-if="!loading && data.support_member_cards!==undefined && data.support_member_cards.length > 0 && showSale">
					<SupportMemberCards :cardsData="data.support_member_cards" />
				</template>
				<!--评价功能-->
				<template v-if="!loading">
					<Evaluate type="KnowledgeColumn" :typeId="Number(data.id)" />
				</template>
				<!--教师显示块-->
				<template v-if="data.teacher && data.teacher_id > 0">
					<Teacher :teacherId="Number(data.teacher_id)" :teacherData="data.teacher" />
				</template>
				<!--课程详情块-->
				<view class="detail">
					<view class="tab">
						<view class="tab-item tab-content" :class="[detailShow == 'content'?'active':'',data.knowledge_lists!==undefined && data.knowledge_lists.length > 0?'':'only']" @click="toggleDetailShow('content')">
							详情
						</view>
						<view class="tab-item tab-list" :class="detailShow == 'list'?'active':''" v-if="data.knowledge_lists!==undefined && data.knowledge_lists.length > 0" @click="toggleDetailShow('list')">
							目录
						</view>
					</view>
					<view class="content" :class="detailShow == 'content'?'':'hidden'">
						<!--购买后自定义描述-->
						<view class="custom-desc" v-if="data.purchase == 1 || data.can_be_used_card!=undefined && data.can_be_used_card.member_card_info.discount == 0">
							<!-- #ifdef MP-->
							<rich-text :nodes="util.formatRichText(data.custom_desc)"></rich-text>
							<!-- #endif -->
							<!-- #ifdef H5-->
							<view v-html="util.formatRichText(data.custom_desc)"></view>
							<!-- #endif -->
						</view>
						<!--完整描述-->
						<view class="all-content">
							<!-- #ifdef MP-->
							<rich-text :nodes="util.formatRichText(data.content)"></rich-text>
							<!-- #endif -->
							<!-- #ifdef H5-->
							<view v-html="util.formatRichText(data.content)"></view>
							<!-- #endif -->
						</view>
						
						<!--问答-->
						<view v-if="!loading">
							<Questions type="Column" :typeId="Number(data.id)" />
						</view>
						<CopyRight :config="config" />
					</view>
					
					<!--课程目录-->
					<view class="list" :class="detailShow == 'list'?'':'hidden'">
						<!--单课列表-->
						<view class="knowledge">
							<view class="item" v-for="(item,index) in knowledge_list" :key="index" @click="goToKnowledgeDetailLink(item.id,data.id)">
								<view class="content">
									<view class="cover">
										<image mode="widthFix" :src="item.cover_200" class="image"></image>
									</view>
									<view class="info">
										<view class="title text-ellipsis-2">{{item.title}}</view>
										<view class="description text-ellipsis">{{item.description}}</view>
									</view>
								</view>
							</view>
						</view>
						<view class="example-body">
							<uni-load-more iconType="circle" :status="knowledgeListLoadStatus" />
						</view>
					</view>
				</view>
			</view>
			<template v-if="!loading && config">
				<SaleBar type="KnowledgeColumn" @getData="getData" :data="data" :config="config" />
			</template>
		</view>
		<view class="tip" v-else>
			内容未上架，请稍后访问
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from 'vuex'
	import SaleBar from '../common/saleBar.vue'
	import SupportMemberCards from '../common/supportMemberCards.vue'
	import Teacher from '../common/teacher.vue'
	import Evaluate from '../common/evaluate.vue'
	import Questions from '../common/questions.vue'
	import CopyRight from '../common/copyRight.vue' //自定义版权
	
	export default {
		
		components: {
			SaleBar,
			SupportMemberCards,
			Teacher,
			Evaluate,
			Questions,
			CopyRight,
		},
		data() {
			return {
				loading: true, //加载中
				urlParams: {}, //url参数
				userInfo : {}, //用户数据
				data: {}, //课程数据
				nodes: [{
					name: 'div',
					attrs: {
						class: 'div-class',
						style: 'line-height: 60px; color: red; text-align:center;'
					},
					children: [{
						type: 'text',
						text: 'Hello&nbsp;uni-app!'
					}]
				}],
				detailShow: 'content', //内容区默认显示课程详情 string content:课程详情 list:系列课目录
				knowledgeListLoadStatus: 'more', // more 加载前 loading 加载中 noMore没有更多
				knowledge_list_page: 1,
				knowledge_list: [],
				showSale: this.util.setShowSale(), //IOS端是否显示销售价格
			}
		},
		async onLoad(option) { //option为object类型，会序列化上个页面传递的参数
			await this.$onLaunched;
			this.urlParams = option
			//通过小程序码进入的获取参数
			if(option.scene){
				// options 中的 scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
				let scene = decodeURIComponent(option.scene); 
				let obj = {};
				for (var i = 0; i < scene.split('*').length;i++){
					var arr = scene.split('*')[i].split('/');
					obj[arr[0]] = arr[1];
				}
			
				this.urlParams.id = obj.id
				this.urlParams.promoter_uid = obj.u
				//console.log(this.urlParams,'scene')
			}
			
			if(this.urlParams.promoter_uid){
				uni.setStorageSync('promoter_uid',this.urlParams.promoter_uid)
			}
			
			Promise.all([this.getData()]).then(res => {
				// 已购买课程进入目录页
				if(this.data.purchase == 1){
					this.detailShow = 'list'
					this.getKnowledgeList(1)
				}
				
				// H5端分享设置
				//#ifdef H5
				let url = window.location.href
				let shareData = {
					title : this.data.title,
					desc : this.data.description,
					img: this.data.cover_200
				}
				this.wechat.share(shareData,url);
				//#endif
				
				// 加载完成
				this.loading = false
			})
		},
		created() {
			//获取已登录用户数据
			this.getUserInfo()
		},
		computed: {
			...mapState(['config'])
		},
		methods: {

			/**
			 * 获取课程详情数据
			 */
			getData: function(){
				let that = this
				return new Promise((resolve, reject) => {
					let params = this.urlParams
					let data = {}
						data.action = 'detail'
						data.m = 'muu_classroom'
						data.id = params.id
					//获取数据
					let url = '';
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/column'
						//#endif
						//#ifdef H5
						url = 'entry/site/column'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.data = res.data.data
								uni.setNavigationBarTitle({
								　　title:res.data.data.title
								})
							}
							resolve(res.data)
						}
					})
				})
			},
			/**
			 * 加载专栏课程分页列表
			 */
			getKnowledgeList: function(page){
				this.knowledgeListLoadStatus = 'loading'
				let that = this
				let params = this.urlParams
				let data = {}
					data.action = 'knowledge'
					data.id = params.id
					data.page = page
				if(page == 1){
					// 清空课程列表
					this.knowledge_list = []
				}
				//获取首页数据
				let url = '';
					//#ifdef MP-WEIXIN
					url = 'entry/wxapp/column'
					//#endif
					//#ifdef H5
					url = 'entry/site/column'
					//#endif
				this.util.request({
					url : url,
					data : data,
					success: function (res) {
						if (res.data.code == 200) {
							let list = res.data.data.data
							if(list.length!==undefined && list.length > 0){
								that.knowledgeListLoadStatus = 'more'
								//console.log(list)
								that.knowledge_list = that.knowledge_list.concat(list);
								that.knowledge_list_page = page + 1
							}else{
								that.knowledgeListLoadStatus = 'noMore'
							}
						}
					}
				})
			},
			
			/**
			 * 显示隐藏详情或目录
			 * @param {Object} value
			 */
			toggleDetailShow: function(value){
				if(value == 'content'){
					this.detailShow = 'content'
				}else{
					this.detailShow = 'list'
					this.getKnowledgeList(1)
				}
			},
			/**
			 * 路由至课程页面
			 * @param {Object} knowledge_id
			 * @param {Object} column_id
			 */
			goToKnowledgeDetailLink: function(knowledge_id,column_id){
				let urlParams = 'id='+knowledge_id+'&column_id='+column_id
				let url = '../knowledge/detail?' + urlParams
				console.log(url)
				//指定跳转地址
				uni.navigateTo({
				    url: url
				});
			},
			
			/**
			 * 更改加载状态
			 */
			loadEnd: function(){
				this.loading = false
			},
			
			/**
			 * 获取已登录用户数据
			 */
			getUserInfo: function(){
				let that = this
				let userInfo = uni.getStorageSync('userInfo') || {}
				this.userInfo = userInfo
			},
		},
		onReachBottom() {
			console.log('页面滚动到底部')
			this.getKnowledgeList(this.knowledge_list_page)
		},
		
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage() {
			// 分享(分销)用户ID
			let userInfo = this.userInfo.memberInfo || {}
			let url = '/muu_classroom/pages/column/detail?' + 'id=' + this.data.id
			if(userInfo.hasOwnProperty("uid") && userInfo.uid !== undefined){
				url = url + '&promoter_uid=' + userInfo.uid
			}
			let share = {
				title : this.data.title,
				path : url,
				desc : this.data.description,
				success : function(){
					
				},
			}
			
			return share
		},
		/**
		 * 监听用户点击右上角转发到朋友圈
		 */
		onShareTimeline() {
			
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f8f8;
	}
	
	.cover {
		position: relative;
		width: 100%;
		image {
			width: 100%;
			display: block;
		}
	}
	.base-info {
		background-color: #fff;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #000;
		}
		.description {
			font-size: 28rpx;
			color: #999;
		}
		.price {
			font-size: 36rpx;
			font-weight: 500;
			color: red;
			margin: 20rpx 0 10rpx 0;
		}
		.data-info {
			display: flex;
			.marking-price {
				font-size: 28rpx;
				color: #999;
				text-decoration: line-through;
				width: 30%;
			}
			.exp-info {
				flex: 1;
				width: 70%;
				text-align: right;
				.item {
					display: inline-block;
					color: #999;
					margin: 0 10rpx;
					font-size: 24rpx;
					.num {
						margin-left: 10rpx;
					}
				}
			}
		}
	}
	
	.detail {
		.tab {
			display: flex;
			padding: 10rpx 0;
			padding: 0 20rpx 0 20rpx;
			background-color: #fff;
			.tab-item {
				flex: 1;
				text-align: center;
				line-height: 72rpx;
				padding-bottom: 8rpx;
			}
			.tab-item.only {
				flex: none;
				text-align: left;
			}
			.tab-content {
				
			}
			.tab-list {
				
			}
			.active {
				position: relative;
				&:before {
					position: absolute;
					right: 30%;
					left: 30%;
					bottom: 0;
					height: 8rpx;
					content: '';
					-webkit-transform: scaleY(.5);
					transform: scaleY(.5);
					background-color: #03b8cf;
				}
			}
		}
		//详情
		.content {
			
			.try-content {
				margin-bottom: 16rpx;
				padding: 20rpx;
				background-color: #fff;
				user-select: text;
			}
			.custom-desc {
				margin-bottom: 16rpx;
				padding: 20rpx;
				background-color: #fff;
				user-select: text;
			}
			.all-content {
				margin-bottom: 16rpx;
				padding: 20rpx;
				background-color: #fff;
				user-select: text;
			}
		}
		//目录
		.list {
			background-color: #fff;
			padding: 20rpx;
			/*竖排*/
			.knowledge {
				/*小图*/
				display: flex;
				flex-wrap: wrap;
				.item {
					width: 100%;
					.content {
						padding: 10rpx;
						display: flex;
						flex-wrap: wrap;
						.cover {
							width: 280rpx;
							border-radius: 10rpx;
							overflow: hidden;
							.image {
								width: 280rpx;
								height: auto;
								display: block;
							}
						}
						.info {
							position: relative;
							padding-left: 20rpx;
							flex: 1;
							.title {
								font-size: 28rpx;
								color: #000;
								font-weight: 600;
								height: 36px;
								line-height: 36rpx;
							}
							.description {
								margin-top: 10rpx;
								color: #999;
								font-size: 24rpx;
							}
							.price {
								margin-top: 10rpx;
								font-size: 24rpx;
							}
							.exp-info {
								position: absolute;
								bottom: 10rpx;
								left: 20rpx;
								right: 0;
								margin-top: 10rpx;
								color: #999;
								font-size: 24rpx;
								.item {
									display: inline;
									.num {
										margin: 0 10rpx;
									}
								}
							}
						}
					}
				}
			}
		}
	}

</style>
